<template>
  <div class="system-role-dialog-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="60%" @close="closeDialog" :close-on-click-modal="false">
      <el-form ref="dialogFormRef" :model="state.formItem.addItem" :rules="state.rules" size="default" label-width="100px"
        v-loading="state.dataLoading" label-position="right" style="width: 90%;text-align: center;">
        <el-form-item label="子任务名称" prop="name">
          <el-input type="textarea" v-model="state.formItem.addItem.name" placeholder="请输入指标名称" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="难度等级">
          <el-select v-model="state.formItem.addItem.level" :disabled="true"  placeholder="请选择难度等级">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优先级">
          <el-select v-model="state.formItem.addItem.sort" :disabled="true" placeholder="请选择优先级">
            <el-option label="低" value="1"></el-option>
            <el-option label="中" value="2"></el-option>
            <el-option label="高" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参考信源" prop="refer">
          <el-input type="textarea" v-model="state.formItem.addItem.refer" placeholder="请输入参考信源" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="price" prop="price">
          <el-input-number v-model="state.formItem.addItem.price" :precision="2" :step="0.1" :max="10" placeholder="请输入单价" :disabled="true"></el-input-number>
        </el-form-item>
        <el-form-item label="参考指南" prop="guide">
          <el-input type="textarea" v-model="state.formItem.addItem.guide" placeholder="请输入参考指南" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="名称" :prop="'dynamicItem.' + index+ '.name'" v-for="(item, index) in state.formItem.dynamicItem" :key="index">
          <el-input v-model="item.name" placeholder="请输入标题" clearable style="width: 40%;" :disabled="true"></el-input>
          <div style="width: 20%;">内容:</div>
          <el-input v-model="item.value" placeholder="请输入标题对应的值" clearable style="width: 40%;" :disabled="true"></el-input>
        </el-form-item>
        <el-divider><span style="color: #F56C6C;">用户需填写区域</span></el-divider>
        
        <el-form-item label="标题" :prop="'userFilled.' + index+ '.name'" v-for="(item, index) in state.formItem.userFilled" :key="index">
          <el-row style="width: 100% !important;">
            <el-col :span="12">
              <el-input v-model="item.name" placeholder="请输入标题" clearabl :disabled="true"></el-input>
            </el-col>
            <el-col :span="6">
              <div>是否必填:</div>
            </el-col>
            <el-col :span="6">
              <div>
                  <el-radio v-model="item.radio" label="1" :disabled="true">是</el-radio>
                  <el-radio v-model="item.radio" label="0" :disabled="true">否</el-radio>
              </div>
            </el-col>
          </el-row>
          <el-row style="width: 100% !important; margin-left: -8%; margin-top: 10 !important;">
            <el-col :span="2">
              <div>备注:</div>
            </el-col>
            <el-col :span="18">
              <el-input v-model="item.remarks" placeholder="请输入备注(选填)" clearabl :disabled="true"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <el-divider style="width: 90%;"><span style="color: #F56C6C;">用户已领取列表</span></el-divider>
      <el-table :data="state.tableData" border style="width: 100%" :height="state.tableHeight"
					ref="multipleTableRef">
					<el-table-column v-for="column in state.columns" :key="column.prop" :label="column.label" :prop="column.prop" :width="column.width" show-overflow-tooltip align="center">
              <template  #default="scope">
                <!-- <span style="color:#409EFF" v-if="column.label =='用户名称'">{{scope.row[column.prop]}}</span> -->
                <span style="color:#909399" v-if="column.label =='指标状态' && scope.row[column.prop] ==0">已领取、未完成</span>
                <span style="color:#E6A23C" v-if="column.label =='指标状态' && scope.row[column.prop] ==1">已完成、未审核</span>
                <span style="color:#409EFF" v-if="column.label =='指标状态' && scope.row[column.prop] ==2">审核不通过</span>
                <span style="color:#409EFF" v-if="column.label =='指标状态' && scope.row[column.prop] ==3">审核通过、未结算</span>
                <span style="color:#409EFF" v-if="column.label =='指标状态' && scope.row[column.prop] ==4">审核通过、已结算</span>
                <span style="color:#909399" v-if="scope.row[column.prop] =='' && column.label !='指标状态'">/</span>
                <!-- <span v-else>{{scope.row[column.prop]}}</span> -->
              </template> 
          </el-table-column>
			</el-table>
    </el-dialog>
  </div>
</template>

<script setup name="systemRoleDialog">
import { normApi } from '/@/api/norm'
import { ElMessage } from 'element-plus';
import { toolsApi } from '/@/api/tools'
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const dialogFormRef = ref();
const router = useRouter();
const state = reactive({
  userId: null,
  index:0,
  userIndex:0,
  apiData: {
		id:'',
	},
  rules: {
    
  },
  dialog: {
    isShowDialog: false,
    title: '',
    submitTxt: '',
  },
  tableData:[
  ],
  columns:[
  ],
  collectsTableData:[],
  collectsColumns:[],
  dataLoading: false,
  btnLoading: false,
  // 填写内容及自定义文本框
  formItem: {
        addItem:{
          name:'',
          level:'',
          sort:'',
          refer:'',
          price:'',
          task_id:'',
        },
        dynamicItem: [
        //默认显示一条
          // {
          //   name: '',
          //   value:''
          // }
        ],
        userFilled: [
        //默认显示一条
          // {
          //   name: '',
          //   radio:'1',
          // }
        ]
  }
});

// 打开弹窗
const openDialog = (norm_id) => {
  state.dialog.isShowDialog = true;
  state.dialog.title = '子任务详情';
  state.apiData.id = norm_id;
  // 清空数据
  state.formItem.addItem.name = '';
  state.formItem.addItem.level = '';
  state.formItem.addItem.sort = '';
  state.formItem.addItem.refer = '';
  state.formItem.addItem.price = '';
  state.formItem.addItem.task_id = '';
  state.formItem.addItem.guide = '';
  state.formItem.dynamicItem = [];
  state.formItem.userFilled = [];
  state.tableData=[];
  state.columns=[];
  state.collectsTableData=[];
  state.collectsColumns=[];
  normApi().normDetail(state.apiData).then(res => {
		let addItem = res.data.addItem;
    let custom = res.data.custom;
    // 数据详情
    state.formItem.addItem.name = addItem.name;
    state.formItem.addItem.level = addItem.level;
    state.formItem.addItem.sort = addItem.sort+'';
    state.formItem.addItem.refer = addItem.refer;
    state.formItem.addItem.price =addItem.price;
    state.formItem.addItem.task_id= addItem.task_id
    state.formItem.addItem.guide= addItem.guide
    state.userIndex = 0;
    state.index = 0;
    custom.forEach(item => {
		    if(item.user_filled==1){
          state.formItem.userFilled.push({name:item.extend_name,radio:item.required+"",remarks:item.extend_remarks});
          state.userIndex++
        }else{
          state.formItem.dynamicItem.push({name:item.extend_name,value:item.extend_value});
          state.index++
        }
		});

    //领取列表
    let receivesList =  res.data.receivesList
    if(receivesList){
      let arr = [
        { label:'序号',     prop: 'index',width:'80px'},
        // { label:'ID',     prop: 'id'},
        { label:'用户名称', prop: 'userInfo.name',width:120},
        { label:'任务名称', prop: 'task_info.name',width:180},
        { label:'指标名称', prop: 'norm_list_info.name',width:180},
      ];
      state.columns = arr;
      receivesList.forEach(function(item, index, arr) {
        let list = { 
          'index': index+1,
          // 'id':item.id,
          'userInfo.name': item.userInfo.name,
          'task_info.name': item.task_info.name,
          'norm_list_info.name': item.norm_list_info.name,
          'status': item.status,
          'not_collectible_remarks': item.not_collectible_remarks?item.not_collectible_remarks:"是",
          'remark': item.remark,
        }
        if(item.refer_type == 1){
          list['refer_type']='官网/政府';
        }else if(item.refer_type ==2 ){
          list['refer_type']='权威媒体';
        }else if(item.refer_type ==3 ){
          list['refer_type']='其他可信信源';
        }else{
          list['refer_type']='/';
        }
        state.tableData.push(list);
        item.norm_list_extend.forEach(function(items, indexs, arrs) {
          state.columns.forEach(function(itemss, indexss, arrss) {
            let vlues = state.columns.map(itemsss => itemsss.prop).indexOf('extend_value'+indexs)
            if(vlues== -1){
              state.columns.push( { label: items.extend_name, prop: 'extend_value'+indexs,width:180 })
            }
          });
          list['extend_value'+indexs] =items.extend_value;
        });
        let sign = 0;
        item.normCollectsExtend.forEach(function(items, indexs, arrs) {
          state.columns.forEach(function(itemss, indexss, arrss) {
            let vlues = state.columns.map(iteml => iteml.prop).indexOf('extend_value'+sign+'_')
            if(vlues== -1){
              state.columns.push( { label: items.extend_name, prop: 'extend_value'+sign+'_',width:180 })
            }
          });
          list['extend_value'+sign+'_'] =items.extend_value;
          sign++
          // list['extend_value'+'_'+sign] =items.extend_value;
        });
		  });
      state.columns.push( { label: '信源类型', prop:'refer_type',width:200 })
      state.columns.push( { label: '采集备注', prop:'remark',width:230 })
      state.columns.push( { label: '指标状态', prop:'status',width:300 })
      // state.columns.push( { label: '图片', prop:'imgPath',width:230 })
      // state.columns.push( { label: '是否可采集', prop:'not_collectible_remarks',width:200 })  
    }
	}).catch(() => {

	})
};



// 关闭弹窗
const closeDialog = () => {
  dialogFormRef.value.resetFields();
  state.dialog.isShowDialog = false;
};

// 暴露变量
defineExpose({
  openDialog,
});


onMounted(() => {
  if(router.currentRoute.value.query.task_id){
		state.formItem.addItem.task_id = router.currentRoute.value.query.task_id
	}

});
</script>

<style scoped lang="scss">
.el-dialog__body {
 
  display: flex;

  justify-content: center;

  align-content: center;

}
.el-input.is-disabled{
  background:#fff !important;
  color: var(--el-radio-text-color) !important;
  -webkit-text-fill-color: var(--el-radio-text-color) !important;
}
:deep(.el-input .el-input__inner){
  background:#fff !important;
  color: var(--el-radio-text-color) !important;
  -webkit-text-fill-color: var(--el-radio-text-color) !important;
}
:deep(.el-input .el-input__wrapper){
  background:#fff !important;
  color: var(--el-radio-text-color) !important;
  -webkit-text-fill-color: var(--el-radio-text-color) !important;
}
.el-textarea.is-disabled{
    background:#fff !important;
    color: var(--el-radio-text-color) !important;
    -webkit-text-fill-color: var(--el-radio-text-color) !important;
  }
  :deep(.el-textarea .el-textarea__inner){
    background:#fff !important;
    color: var(--el-radio-text-color) !important;
    -webkit-text-fill-color: var(--el-radio-text-color) !important;
  }
  :deep(.el-textarea .el-textarea__wrapper){
    background:#fff !important;
    color: var(--el-radio-text-color) !important;
    -webkit-text-fill-color: var(--el-radio-text-color) !important;
  }
</style>
